<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="shixun1.css">
    <script src="jQuery.min.js"></script>
    <script>
        $(function() {
            $("form ul li input").on({
                focus:function(){
                    $(this).siblings("span").addClass("bianhua");
                },
                blur:function() {
                    if($(this).val().length == 0){
                        $(this).siblings("span").removeClass("bianhua");
                    }
                }
            });
            $(".r-b").on('click',function(){
                $(this).parent().addClass("yido");
                $(this).parent().parent().siblings("div").children(".up-right").removeClass("yido");
                $(this).parent().parent().addClass("yin");
                $(this).parent().parent().siblings("div").addClass("hide");
            });
            $(".right-button2").on("click",function(){
                $(this).parent().addClass("yido");
                $(this).parent().parent().siblings("div").children(".m-r").removeClass("yido");
                $(this).parent().parent().removeClass("hide");
                $(this).parent().parent().siblings("div").removeClass("yin");
            })
        })
    </script>
</head>
<body>
    <div class="quan">
        <div class="quan-mian">
            <div class="m-l">
                <form action="实训1.html" name="denglu" autocomplete="on">
                    <h2>Sign In</h2>
                    <ul>
                        <li>
                            <input type="email">
                            <span>email address</span>
                        </li>
                            
                        <li>
                            <input type="password" name="pw">
                            <span>password</span>
                        </li>
                    </ul>
                    <input type="submit" value="SIGN IN">
                    <h5>Forgot Password?</h5>
                </form>
                <div class="l-b">
                    <img src="img/wechat.png" title="微信">
                    <img src="img/qq.png" title="QQ">
                    <img src="img/github.png" title="github">
                    <img src="img/sina.png" title="微博">
                </div>
            </div>
            <div class="m-r">
                <ul>
                    <li>
                        <h2>New here?</h2>
                    </li>
                    <li>
                        Sign up and discover great <br>
                        amount of new opportunities!
                    </li>
                </ul>
                <button class="r-b">SIGN IN</button>
            </div>
        </div>

        <div class="quan-up">
             <div class="up-left">
                <form action="实训1.html" name="denglu" autocomplete="on">
                    <h2>Sign Up</h2>
                    <ul>
                        <li>
                            <input type="text">
                            <span>name</span>
                        </li>
                        <li>
                            <input type="email">
                            <span>email address</span>
                        </li>   
                        <li>
                            <input type="password" name="pw">
                            <span>password</span>
                        </li>
                        <li>
                            <input type="password" name="pw">
                            <span>confirm password</span>
                        </li>
                    </ul>
                    <input type="submit" value="SIGN IN">
                    <h5>Forgot Password?</h5>
                </form>
                <div class="l-b">
                    <img src="img/wechat.png" title="微信">
                    <img src="img/qq.png" title="QQ">
                    <img src="img/github.png" title="github">
                    <img src="img/sina.png" title="微博">
                </div>
            </div>
             <div class="up-right">
                <ul>
                    <li>
                        <h2>One of us?</h2>
                    </li>
                    <li>
                        If you already has an account, <br>
                        just sign in. We've missed you!
                    </li>
                </ul>
                <button class="right-button2">SIGN IN</button>
            </div>
        </div>
    </div>
</body>
</html>